<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="vue.css">
    <script src="node_modules/_vue@2.5.17@vue/dist/vue.min.js"></script>
    <script src="node_modules/_mockjs@1.0.1-beta3@mockjs/dist/mock-min.js"></script>
</head>
<body>
     <div class="box" v-cloak="">
         <ul class="box_ul firstLine_bgColor">
             <li class="item IDSize">ID</li>
             <li class="item userName">用户名</li>
             <li class="item gender">性别</li>
             <li class="item city">城市</li>
             <li class="item signature">签名</li>
             <li class="item integral">积分</li>
             <li class="item grade">评分</li>
             <li class="item job">职业</li>
             <li class="item clear_btn">Del</li>
         </ul>
         <ul class="box_ul" v-for="(item,key) in data" >
             <li class="item IDSize">{{item.id}}</li>
             <li class="item userName">{{item.username}}</li>
             <li class="item gender">{{item.gender?'男':'女'}}</li>
             <li class="item city">{{item.city}}-{{item.number}}</li>
             <li class="item signature">签名-{{item.integral}}</li>
             <li class="item integral">{{item.grade}}</li>
             <li class="item grade">{{item.grade}}</li>
             <li class="item job">{{item.job}}</li>
             <li class="item clear_btn btn" @click="clearBtn(key)">删除</li>
         </ul>
     </div>
</body>
<script>
    var config = {
         el:'.box',
         data: {
             data: Mock.mock({
                 'data|10': [{
                    'id|+1': 1004,
                    'username': '@cname',
                    'gender': '@boolean',
                     'city': '@city',
                     'number': '@integer(0,9)',
                     'integral': '@integer(100,1000)',
                     'grade': '@integer(0,100)',
                     'job|1': ["教师", "程序员", "音乐人", "公务员"],
                 }]
             }).data,
         },
        methods:{
            clearBtn: function(index){
               this.data.splice(index,1);
            }
        }
    };
    var app = new Vue(config);
</script>
</html>